<!--
 * Tencent is pleased to support the open source community by making BK-JOB蓝鲸智云作业平台 available.
 *
 * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
 *
 * BK-JOB蓝鲸智云作业平台 is licensed under the MIT License.
 *
 * License for BK-JOB蓝鲸智云作业平台:
 *
 *
 * Terms of the MIT License:
 * ---------------------------------------------------
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
 * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
 * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
 * the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
 * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
 * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 * IN THE SOFTWARE.
-->

<template>
  <div
    v-bkloading="{ isLoading }"
    class="history-step-detail-view">
    <task-step-detail
      :data="stepInfo"
      :variable="variableList">
      <detail-item
        v-if="rollingConfigExpr"
        :label="$t('history.滚动策略：')">
        <span
          v-bk-tooltips.right="rollingExprParse(rollingConfigExpr)"
          class="tips">
          {{ rollingConfigExpr }}
        </span>
      </detail-item>
      <detail-item
        v-if="rollingModeText"
        :label="$t('history.滚动机制：')">
        {{ rollingModeText }}
      </detail-item>
    </task-step-detail>
  </div>
</template>
<script setup>
  import {
    ref,
    shallowRef,
  } from 'vue';

  import TaskExecuteService from '@service/task-execute';

  import GlobalVariableModel from '@model/task/global-variable';
  import TaskStepModel from '@model/task/task-step';

  import rollingExprParse from '@utils/rolling-expr-parse';

  import DetailItem from '@components/detail-layout/item';

  import I18n from '@/i18n';

  import TaskStepDetail from './task-step-detail/index.vue';

  const props = defineProps({
    taskId: {
      type: Number,
      required: true,
    },
    id: {
      type: [Number, String],
    },
  });

  const isLoading = ref(true);
  const stepInfo = shallowRef({});
  const rollingConfigExpr = ref('');
  const rollingModeText = ref('');
  const variableList = shallowRef([]);

  //  步骤详情
  const fetchStep = () => TaskExecuteService.fetchStepInstance({
    id: props.id,
  }).then((data) => {
    if (data.rollingEnabled) {
      rollingConfigExpr.value = data.rollingConfig.expr;
      const modeMap = {
        1: I18n.t('默认（执行失败则暂停）'),
        2: I18n.t('忽略失败，自动滚动下一批'),
        3: I18n.t('不自动，每批次都人工确认'),
      };
      rollingModeText.value = modeMap[data.rollingConfig.mode];
    }

    stepInfo.value = new TaskStepModel(data);
  });

  const fetchTaskVariables = () => TaskExecuteService.fetchStepInstanceParam({
    id: props.taskId,
  }).then((data) => {
    variableList.value = Object.freeze(data.map(({ id, name, type, value, targetValue }) => new GlobalVariableModel({
      id,
      name,
      type,
      defaultValue: value,
      defaultTargetValue: targetValue,
    })));
  });

  Promise.all([
    fetchStep(),
    fetchTaskVariables(),
  ]).finally(() => {
    isLoading.value = false;
  });
</script>
